"use strict";
import React from "react";
import ReactDOM from "react-dom";
import Reflux from "reflux";

var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

// tap event 
var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

import { Router, Route, IndexRoute } from 'react-router';
import { History, Lifecycle } from "react-router";

import { each, map } from "lodash";
import $ from "jquery";

import { UserStore } from "./store/userstore.js";
import { PageLogin } from "./component/pagelogin.jsx";
import { UserActions } from "./action/useraction.js";

import { PageIndex } from "./component/pageindex.jsx";
// 客户
import { PageClient } from "./component/pageclient.jsx";
import { PageClientDetail } from "./component/pageclientdetail.jsx";
// 交易
import { PageTrading } from "./component/pagetrading.jsx";
import { PageTradingDetail } from "./component/pagetradingdetail.jsx";
// 产品
import { PageProduct } from "./component/pageproduct.jsx";
import { PageProductDetail } from "./component/pageproductdetail.jsx";

//搜索
import { PageSearch } from "./component/pagesearch.jsx";
import { PageHelp } from "./component/pagehelp.jsx";

import { onDeviceReady } from "./native.js";

// 加载 CSS
require("../prototype/css/normalize.css");
require("bootstrap/dist/css/bootstrap.min.css");
require("../prototype/lib/bootstrap/css/font-awesome.min.css");
require("../prototype/lib/bootstrap/css/bootstrap-datetimepicker.min.css");
require("../prototype/css/themes.css");
require("../prototype/css/main.css");
require("../prototype/css/themes.css");
require("../prototype/css/media.css");
require("./css/custom.css");
require("./css/iscroll.less");
require('./css/animation.css');


// 初始化时，清空登录
// UserActions.logout();


var App = React.createClass({
	mixins: [ History, Router.State, Reflux.connect(UserStore, "user") ],
    currPathLevel: 0,
    pathLevel: function(path){
        if(path=='/trading' || path=='/client' || path=='/help'){
            return 1;
        }
        else if(path == '/trading/detail' || path == '/client/detail'){
            return 2;
        }
        else if(path == '/index'){
            return 0;
        }
        else{
            return null;
        }
    },
	render: function(){
        if(this.state.user == null || this.state.user.err != null){
            return <PageLogin />
        }
        var pathname = this.props.location.pathname;
        var direct = 'none';
        var pathLevel = this.pathLevel(pathname);
        // console.log(this.currPathLevel, pathLevel)
        if(pathLevel != null){
            if(this.currPathLevel < pathLevel){
                direct = 'right'
            }
            else if(this.currPathLevel > pathLevel){
                direct = 'left'
            }
            else{

            }
            this.currPathLevel = pathLevel;
        }
        // console.log(direct)
        if(pathLevel == null){
            return this.props.children;
        }
	    return (
            <ReactCSSTransitionGroup transitionName={"view-transition-show-from-" + direct} transitionAppear={false} 
                transitionEnter={true} transitionLeave={true}
                transitionEnterTimeout={320} transitionLeaveTimeout={320} component="div">
                <div key={this.props.location.pathname}>
                {this.props.children}
                </div>
            </ReactCSSTransitionGroup>
        );
  	}
});



var routes = (
  	<Route path="/" component={App}>
  		<IndexRoute component={PageIndex} />
      	// 首页
    	<Route name="index" path="/index" component={PageIndex} />

    	// 交易
    	<Route name="trading" path="/trading" component={PageTrading} />
    	<Route name="tradingDetail" path="/trading/detail" component={PageTradingDetail} />

    	// 客户
    	<Route name="client" path="/client" component={PageClient} />
        <Route name="clientDetail" path="/client/detail" component={PageClientDetail} />

    	// 产品
    //	<Route name="product" path="/product" component={PageProduct} />
    //    <Route name="productDetail" path="/product/detail" component={PageProductDetail} />

        //搜索
        <Route name="search" path="/search" component={PageSearch} />
        <Route name="help" path="/help" component={PageHelp} />
  	</Route>
);


/*
    加载完成
*/
document.addEventListener('deviceready', onDeviceReady, false);


ReactDOM.render(<Router>{routes}</Router>, $('#app')[0]); 

// import { ExampleApp } from "./component/scroll.jsx";
// ReactDOM.render(<ExampleApp/>, $('#app')[0]); 

